<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <el-radio-group v-model="curStyle">
    <el-radio v-for="item in styleOptions" :key="item" :label="item" @click="toggleMapStyle(item)">
      {{ item }}
    </el-radio>
  </el-radio-group>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import {mapStyle} from "@/consts/MapConfigConst"

export default {
  name: "ChangeMapStyle.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      styleOptions.value = _.keys(mapStyle)
    };

    let curStyle = ref("streets-v11")
    let styleOptions = ref([])
    const toggleMapStyle = (key) => {
      curStyle.value = key
      mapStore.value.setStyle(mapStyle[key])
    }

    return {
      mapOnLoadCB, curStyle, styleOptions, toggleMapStyle
    }
  }
}
</script>

<style scoped lang="scss">
.el-radio-group {
  position: absolute;
  left: 20px;
  top: 20px;
  background: rgba(255, 255, 255, 80%);
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
